<template>
  <div class="operate-list2 inline-block">
    <a-button class="operate-btn del" type="text" v-if="showDeleteBtn" @click="deleteFn(index)">
      <a-space size="mini"><icon-minus-circle />删除</a-space>
    </a-button>
    <a-button class="operate-btn new" :class="{ 'disabled-color': isDisabled }" type="text" @click="addFn" v-if="index == length - 1">
      <a-space size="mini"><icon-plus-circle />新增</a-space></a-button
    >
  </div>
</template>

<script setup name="MerchantStoreOperateList">
  import { computed } from 'vue'
  const props = defineProps({
    index: Number,
    length: Number,
    onlyLastShowDelete: {
      type: Boolean,
      default: false,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
  })
  const emit = defineEmits(['add', 'delete'])
  const showDeleteBtn = computed(() => {
    let index = props.index
    if (props.onlyLastShowDelete) {
      return index == props.length - 1 && index > 0
    }
    return index > 0
  })
  const addFn = () => {
    if (!props.isDisabled) {
      emit('add')
    }
  }
  const deleteFn = (index) => {
    emit('delete', index)
  }
</script>

<style lang="less" scoped>
  .operate-list2 {
    position: absolute;
    right: -180px;
    width: 180px;
    padding-left: 16px;
    .operate-btn {
      font-size: 14px;
      height: 32px;
      line-height: 32px;
      padding: 0 12px;
      icon {
        margin-right: 8px;
      }
      &.del {
        color: #ea0000;
      }
      &.new {
        color: #165dff;
      }
    }
    .disabled-color {
      color: #b6b6b6 !important;
    }
  }
</style>
